// 显示模块
<template>
    <div id='info-block-container'>
        <h3><slot name="title" /></h3>
        <div class="edit-mode" v-if="editMode">
            <slot name="edit-box" />
            <div style="margin: 10px 0; text-align: center">
                <Button type="primary" 
                        shape="circle" 
                        style="margin: 0 10px" 
                        ghost 
                        @click="editMode = false; $emit('on-cancel')">
                    取消
                </Button>
                <Button type="primary" 
                        shape="circle" 
                        style="margin: 0 10px" 
                        @click="editMode = false; $emit('on-save')">
                    保存
                </Button>
            </div>
        </div>
        <div class="read-mode" v-else>
            <slot name="read-box" />
            <span class="edit-btn" 
                  @click="editMode = true" 
                  v-if="editable">
                编辑
            </span>
        </div>
    </div>
</template>

<script lang='ts'>
import { InfoBlock } from "./Index";
export default InfoBlock;
</script>

<style lang='scss' scoped>
@import './Index.scss';
</style>